<!--  活动模版-->
<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <search ref="search"  :config="searchConfig" @search="search" @getHeight="getHeight"/>

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" @click="handleAdd">新增</a-button>
      <a-button type="primary" @click="handleCopy" :disabled='selectedRowKeys.length !== 1'>复制</a-button>
      <a-button type="primary" @click='batchDel'>删除</a-button>
      <a-button type="primary" @click="stateChange('009')">启用</a-button>
      <a-button type="primary" @click="stateChange('003')">禁用</a-button>
<!--      <a-button type="primary" >导入</a-button>-->
      <!--<a-button type="primary" >导出</a-button>-->
    </div>
    <!-- table区域-begin -->
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :scroll="{x:1500,y:pageHeight-seachHeight-220}"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      class=""
      :loading="loading"
      :customRow="onClickRow"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      @change="handleTableChange">
        <span slot="remarks" slot-scope="text">
          <j-ellipsis :value="text" :length="15" />
        </span>
        <span slot="proName" slot-scope="text">
          <j-ellipsis :value="text" :length="18" />
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
        </span>
    </a-table>
    <policy-add ref='modalForm' @ok="modalFormOk"></policy-add>
  </a-card>
</template>

<script>
import { PageListMixin } from '@/mixins/PageListMixin'
import JEllipsis from "@/components/cn-form/JEllipsis";
import { getAction, postAction } from '@api/manage'
import policyAdd from './model/policyAdd'


export default {
  name: 'activityTemplate',
  mixins:[PageListMixin],
  components: {
    policyAdd,JEllipsis
  },
  data () {
    return {
      description: '随车政策管理',
      searchConfig:[
        {
          // label:'订单编号',
          type:'input',
          name:'proCode',
          placeholder:'请输入政策编号',
        },{
          // label:'业务员',
          type:'input',
          name:'proName',
          placeholder:'请输入政策名称',
        },
        {
          // label:'订单状态',
          type:'a-select',
          name:'status',
          option:[{
            name:'启用',
            value:'009'
          },{
            name:'停用',
            value:'003'
          }],
          placeholder:'请选择状态',
        },
        {
          type:'date-range',
          name:'date',
          range:['startDate','endDate'],
          placeholder:['有效期开始时间','有效期结束时间']

        },
       ],
      // 表头
      columns: [
        // { type: 'checkbox', width: 50, fixed: null ,dataIndex: 'a',},
        {
          title: '政策编码',
          align: "left",
          dataIndex: 'proCode',
          fixed:"left",
          width: 130,
          customRender: (value, row, index) => {
            let vm = this
            let child = vm.$createElement('a', {
              domProps: {
                innerHTML: value
              },
              on: {
                click: function() {
                  vm.onDblclicks(row)
                }
              }
            })
            const obj = {
              children: child,
              attrs: {}
            }
            return obj
          }
        },
        {
          title: '政策名称',
          align: "left",
          dataIndex: 'proName',
          minWidth: 150,
          scopedSlots: { customRender: 'proName' }
        },
        {
          title: '政策描述',
          align: "left",
          minWidth: 200,
          dataIndex: 'remarks',
          scopedSlots: { customRender: 'remarks' }
        },
        {
          title: '开始日期',
          align: "left",
          width: 90,
          dataIndex: 'startDate',
        },
        {
          title: '结束日期',
          align: "left",
          width: 90,
          dataIndex: 'endDate',
        },

        {
          title: '创建人',
          align: "left",
          width: 80,
          dataIndex: 'createName',

        },
        {
          title: '创建时间',
          align: "left",
          width: 150,
          dataIndex: 'createTime',
          // customRender:(t,r,index)=>{
          //   return r.createDate +'-'+ r.createDateTime
          // }
        },
        {
          title: '更新人',
          align: "left",
          width: 80,
          dataIndex: 'updateName',

        },
        {
          title: '更新时间',
          align: "left",
          width: 150,
          dataIndex: 'updateTime',
          // customRender:(t,r,index)=>{
          //   if(r.updateDate!=null){
          //     return r.updateDate +'-'+ r.updateDateTime
          //   }
          // }
        },
        {
          title: '状态',
          align: "left",
          fixed:'right',
          dataIndex: 'status',
          width: 50,
          customRender: (r) => {
            let vm = this
            let child = (r=='009'?'启用':'停用')
            const obj = {
              children: child,
              attrs: {}
            }
            return child
          }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "left",
          width: 110,
          fixed:'right',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'action'},
        }
      ],


      url: {
        // 列表接口
        list: window._CONFIG['domianTpmURL']+ "/actPromotionController/findActPromotionList",
        // 详情接口
        detail: window._CONFIG['domianTpmURL']+ "/actPromotionController/getActPromotionByIdCode",
        // 导出接口
        // exportXlsUrl: window._CONFIG['domianTpmURL']+"budget/tpmBudgetFee/exportXls",
        // 删除接口
        deleteBatch:window._CONFIG['domianTpmURL']+ "/actPromotionController/delete",
        // 启停用接口
        status:window._CONFIG['domianTpmURL']+ "/actPromotionController/actPromotionStartOrStop",
      },
    }
  },
  created() {


  },

  watch:{

  },
  computed: {
    importExcelUrl: function(){
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    }
  },
  methods: {
    handleCopy : async function () {
     let record = this.selectionRows[0]
      if (this.url.detail) {
        const res = await getAction(this.url.detail, {id: record.id,proCode:''})
        if (res && res.result) {
          record = res.result
          record.id = undefined
        }else{
          this.$message.error(res.message)
        }
      }
     this.$refs.modalForm.edit(record);
     this.$refs.modalForm.title = "复制";
     this.$refs.modalForm.disableSubmit = false;
    },
    handleEdit: async function (record) {
      if (this.url.detail) {
        const res = await getAction(this.url.detail, {id: record.id,proCode:''})
        if (res && res.result) {
          record = res.result
        }else{
          this.$message.error(res.message)
        }
      }
      this.$refs.modalForm.edit(record);
      this.$refs.modalForm.title = "编辑";
      this.$refs.modalForm.disableSubmit = false;
    },

    handleChange(value) {
      console.log(`selected ${value}`);
    },
    handleSingle(){
      this.$refs.sendSap.add()
      this.$refs.sendSap.title='发送SAP'
    },
    handleSap(){
      this.$refs.manualCatchSingle.add()
      this.$refs.manualCatchSingle.title='手动抓单'
    },
    cityClick(t){
      this.$refs.basicInformation.edit()
      this.$refs.basicInformation.title='基础信息'
    },
    handlePageChange(page,pageSize){
      this.ipagination.current=page
      this.loadData()
    },
    handleSizeChange(current,size){
      this.ipagination.pageSize=size
      this.loadData()
    },
    onDblclicks:async function (record){
      if (this.url.detail) {
        const res = await getAction(this.url.detail, {id: record.id,proCode:''})
        if (res && res.result) {
          record = res.result
        }else{
          this.$message.error(res.message)
        }
      }
      this.$refs.modalForm.edit(record);
      this.$refs.modalForm.title = "详情";
      this.$refs.modalForm.disableSubmit = true;
    },
  }
}
</script>

<style lang="less" scoped>
@import '~@assets/less/common.less';
/deep/ .ant-pagination{
  float:right;
}

///deep/ .resize-table-th {
//  position: relative;
//}
///deep/ .table-draggable-handle {
//  height: 100% !important;
//  bottom: 0;
//  left: auto !important;
//  right: -5px;
//  cursor: col-resize;
//  touch-action: none;
//}

</style>